<template>
    <div id="caipiao">
        <ul>
            <li v-for="(item,key) in allcaipiao" :key="key" @click="pushTo(item.cn)">
                <img :src="'http://192.168.2.245:3000'+item.icon2"/>
                <span>{{item.cn}}</span>
            </li>
        </ul>
            <span class="uploadRound" @click="showimage=true">
                <i class="el-icon-plus"></i>
            </span>
        
        <uploadimage
            :showimage="showimage"
        />
        <router-view/>
        <!-- {{allssq}} -->
    </div>
</template>
<script>
import uploadimage from './uploadimage'
export default {
    components:{uploadimage},
    data(){
        return{
             showimage:false,
        }
    },
    methods:{
        loadAllcaipiao(){
            return this.$store.getters.loadAllcaipiao;
        },
         pushTo(item){
            this.$router.push({name:item});
        }
    },
    computed:{
        allcaipiao(){
            return this.$store.getters.allcaipiao
        }
    },
    mounted(){
        this.$store.dispatch('loadAllcaipiao')
    }
}
</script>
<style lang="scss" scoped>
    #caipiao{
       
        font-weight: 400;
        font-size: 25px;
        ul{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            li{
            width: 130px;
            height: 130px;
            display: flex;
            flex-direction: column;
            margin-left: 30px;
            }
        }
       
        .uploadRound{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            width: 100px;
            height: 100px;
            border: 1px dashed gray;
            border-radius: 5px;
            font-size: 30px;
        }
    }
</style>


